// 封装类别函数相关代码

import { getCategoryAPI } from '@/apis/category'
import { onMounted, ref } from 'vue';
import { onBeforeRouteUpdate, useRoute } from 'vue-router';

export function useCategory() {
    const categoryData = ref({})
    // 获取路由参数。希望路由参数变化时，可以重新发送getCategory,复用getBanner
    const route = useRoute() // 通过这个对象获取路由参数

    // const getCategory = async () => {
    //   const res = await getCategoryAPI(route.params.id)
    //   categoryData.value = res.result
    // }

    // 如果是第一次调用，默认id是旧路由地址，否则调用的是to.params.id
    const getCategory = async (id = route.params.id) => {
        const res = await getCategoryAPI(id)
        categoryData.value = res.result
    }

    onMounted(() => {
        getCategory()
    })
    
    // onBeforeRouteUpdate(()=>{  不能直接简单这样，因为此时参数还是旧的route.params.id
    //    getCategory() 
    // })
    onBeforeRouteUpdate((to) => {
        // 获取to参数，表示最新的路径
        console.log(to)
        getCategory(to.params.id)
    })

    return {
        categoryData
    }
}